<template>
	<view class="map-page" :style="{'padding-top': height}">
		<map
			class="map"
			:latitude="lat"
			:longitude="lng"
			:markers="markers"
			:show-location="showLocation"
			:enable-traffic="isTraffic"
			:enable-satellite="isSatellite"
		>
			<car-icon ref="carIconRef" :height="height"></car-icon>
		</map>
		<cover-view class="float-box" style="margin-top: 24rpx;">
			<top-window :isTraffic="isTraffic" :satellite="isSatellite" @onTopMethods="onTopMethods"></top-window>
		</cover-view>
		<cover-view class="float-box" style="margin-top: 124rpx;">
			<right-window @onRightMethods="onRightMethods"></right-window>
		</cover-view>
		<view class="custom" :style="{height: customHeight + 'rpx'}">
			<custom :customObj="customObj" @onCustomMethods="onCustomMethods"></custom>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import topWindow from './topWindow.vue';
	import rightWindow from './rightWindow.vue';
	import custom from './custom.vue';
	import carIcon from '../../components/carIcon.vue'
	export default{
		components: {
			topWindow,
			rightWindow,
			custom,
			carIcon
		},
		props: {
			height: String
		},
		data() {
			return {
				lat: '39.90960456049752',
				lng: '116.3972282409668',
				markers: [],
				customObj: {},
				customHeight: 0,
				isTraffic: false,
				isSatellite: false,
				carIconShow: false,
				showLocation: false,
				timer: null
			}
		},
		computed: {
			...mapState({
				carInfo: state => state.bike.carInfo
			})
		},
		watch: {
		    carInfo: {
		        immediate: true,
				handler: function (newval) {
				   if(newval.id) {
					    clearTimeout(this.timer)
					    this.timer = null
						this.getData()
						this.timer = setInterval(() => {
							this.getData()
						}, 10000)
				   }
				}
			}
		},
		beforeDestroy() {
			clearTimeout(this.timer)
			this.timer = null
		},
		methods: {
			onTopMethods(str) {
				if(str === 'traffic') {
					this.isTraffic = !this.isTraffic
				}else if(str === 'satellite') {
					this.isSatellite = !this.isSatellite
				}
			},
			onRightMethods(str) {
				if(str === 'my') {
					uni.getLocation({
					    type: 'gcj02',
					    success: (res) => {
							this.scale = this.scale == 15 ? 16 : 15
							this.lat = res.latitude
							this.lng = res.longitude
							this.showLocation = true
					    },
						fail: () => {
							uni.getSetting({
								success(res) {
									if (!res.authSetting['scope.userLocation']) {
										uni.openSetting({
											success(data) {
												console.log(data)
											},
											fail(error) {
												console.log(error)
											}
										})
									}
								}
							})
						}
					});
				}else if(str === 'car') {
					if(!this.carInfo.id) {
						uni.showToast({
							title: '请选择车辆',
							icon: 'none'
						})
						return false
					}
					this.lat = this.markers[0].latitude
					this.lng = this.markers[0].longitude
				}else{
					this.$refs.carIconRef.getData()
				}
			},
			onCustomMethods(str) {
				if(str === 'freshen') {
					this.getData('freshen')
				}else if(str === 'close') {
					this.customHeight = 300
				}
			},
			async getData(str) {
				if(str === 'freshen') {
					uni.showLoading({
						title: '数据刷新中',
						icon: 'none'
					})
				}
				const ret = await this.$Http('get', {carIds: this.carInfo.id}, '/gps-web/api/get_gps_r.jsp');
				if(str === 'freshen') {
					uni.hideLoading()
					uni.showToast({
						title: '刷新成功',
						icon: 'none'
					})
				}
				if(ret.list.length === 0) {
					uni.showToast({
						title: '未检索到该车信息',
						icon: 'none'
					})
					return false
				}
				const data = ret.list[0];
				this.customHeight = 700
				this.lat = data.glat
				this.lng = data.glng
				this.markers = [{
					id: 1,
					latitude: data.glat,
					longitude: data.glng,
					width: 20,
					height: 20,
					iconPath: data.iconLink,
					rotate: data.drct * 1
				}]
				this.customObj = {
					carPlate: data.carPlate,
					satl: data.satl,
					sgn: data.sgn,
					drctCn: data.drctCn,
					speed: `${data.speed}km/h`,
					runStopTime: data.runStopTime,
					preMile: `${data.preMile}km`,
					mile: `${data.mile}km`,
					time: data.time,
					teamName: data.teamName,
					drvName: data.drvName,
					drvPhone: data.drvPhone,
					plateColor: data.plateColor,
					accTime: data.accTime,
					addr: data.addr,
					latitude: data.glat,
					longitude: data.glng
				}
			}
		}
	}
</script>

<style scoped>
	.map-page{
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 750rpx;
		height: 100vh;
		box-sizing: border-box;
	}
	.float-box{
		position: absolute;
		right: 24rpx;
	}
	.map{
		width: 750rpx;
		flex: 1;
	}
	.custom{
		padding-bottom: 100rpx;
		overflow: hidden;
		background: #fff;
		transition: height 0.3s ease;
		box-sizing: border-box;
	}
</style>
